<template>
  <el-card class="main-card">
    <template #header>
      <div class="card-header">
        <span class="header-title">文娱中心</span>
        <span class="header-subtitle">丰富老年生活，享受快乐时光</span>
      </div>
    </template>

    <!-- 娱乐活动分类 -->
    <div class="section-container">
      <div class="section-header">
        <el-icon class="section-icon"><Headset /></el-icon>
        <h3 class="section-title">娱乐分类</h3>
      </div>
      <div class="activity-grid">
        <el-card
            v-for="category in entertainmentCategories"
            :key="category.categoryId"
            shadow="hover"
            class="activity-card"
            @click="showEntertainmentCategoryDetail(category)"
            :body-style="{ padding: '20px' }"
        >
          <div class="activity-content">
            <div class="activity-icon">
              <el-image
                  :src="category.iconUrl"
                  fit="cover"
                  class="category-icon"
                  v-if="category.iconUrl"
              />
              <el-icon v-else class="default-icon">
                <Headset />
              </el-icon>
            </div>
            <div class="activity-title">{{ category.categoryName }}</div>
            <div class="activity-hover">点击查看详情</div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 课程分类 -->
    <div class="section-container">
      <div class="section-header">
        <el-icon class="section-icon"><School /></el-icon>
        <h3 class="section-title">课程分类</h3>
      </div>
      <div class="activity-grid">
        <el-card
            v-for="category in courseCategories"
            :key="category.categoryId"
            shadow="hover"
            class="activity-card"
            @click="showCourseCategoryDetail(category)"
            :body-style="{ padding: '20px' }"
        >
          <div class="activity-content">
            <div class="activity-icon">
              <el-image
                  :src="category.iconUrl"
                  fit="cover"
                  class="category-icon"
                  v-if="category.iconUrl"
              />
              <el-icon v-else class="default-icon">
                <School />
              </el-icon>
            </div>
            <div class="activity-title">{{ category.categoryName }}</div>
            <div class="activity-hover">点击查看详情</div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 热门课程 -->
    <div class="section-container">
      <div class="section-header">
        <el-icon class="section-icon"><VideoCamera /></el-icon>
        <h3 class="section-title">热门课程</h3>
        <el-tag type="danger" effect="plain" class="hot-tag">HOT</el-tag>
      </div>
      <div class="activity-grid">
        <el-card
            v-for="course in popularCourses"
            :key="course.courseId"
            shadow="hover"
            class="activity-card course-card"
            @click="showCourseDetail(course)"
            :body-style="{ padding: '20px' }"
        >
          <div class="activity-content">
            <div class="course-cover">
              <el-image
                  :src="course.coverUrl"
                  fit="cover"
                  class="cover-image"
                  v-if="course.coverUrl"
              />
              <div class="cover-overlay">
                <el-icon class="play-icon"><VideoPlay /></el-icon>
              </div>
            </div>
            <div class="course-info">
              <div class="activity-title">{{ course.title }}</div>
              <div class="activity-meta">
                <span class="learners">
                  <el-icon><User /></el-icon>
                  {{ course.learnedCount }}人学习
                </span>
                <el-tag v-if="course.isFree" size="small" type="success" class="price-tag">免费</el-tag>
                <el-tag v-else size="small" type="warning" class="price-tag">付费</el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 娱乐分类详情对话框 -->
    <el-dialog
        v-model="showEntertainmentCategoryDialog"
        :title="currentEntertainmentCategory.categoryName"
        width="90%"
        class="category-dialog"
        :close-on-click-modal="false"
    >
      <div v-loading="entertainmentResourcesLoading" class="dialog-content">
        <el-tabs v-model="entertainmentActiveTab" class="custom-tabs">
          <el-tab-pane label="资源列表" name="resources">
            <div class="resource-header">
              <el-pagination
                  small
                  layout="prev, pager, next, sizes, total"
                  :total="entertainmentTotalResources"
                  :page-size="entertainmentPageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  v-model:current-page="entertainmentCurrentPage"
                  v-model:page-size="entertainmentPageSize"
                  @current-change="handleEntertainmentPageChange"
                  @size-change="handleEntertainmentSizeChange"
              />
            </div>
            <el-row :gutter="20" class="resource-grid">
              <el-col
                  :span="8"
                  v-for="resource in entertainmentResources"
                  :key="resource.resourceId"
              >
                <el-card shadow="hover" class="resource-card">
                  <div class="resource-cover">
                    <el-image
                        :src="resource.coverUrl"
                        fit="cover"
                        class="cover-image"
                    />
                    <div class="resource-type">
                      <el-tag size="small" effect="dark" :type="getResourceTypeTag(resource.resourceType)">
                        {{ getResourceType(resource.resourceType) }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="resource-info">
                    <h4 class="resource-title">{{ resource.title }}</h4>
                    <p class="resource-desc">{{ resource.description }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="分类信息" name="info">
            <el-descriptions border class="category-info">
              <el-descriptions-item label="分类ID">{{ currentEntertainmentCategory.categoryId }}</el-descriptions-item>
              <el-descriptions-item label="分类名称">{{ currentEntertainmentCategory.categoryName }}</el-descriptions-item>
              <el-descriptions-item label="排序序号">{{ currentEntertainmentCategory.sortOrder }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="currentEntertainmentCategory.isActive ? 'success' : 'danger'" effect="light" round>
                  {{ currentEntertainmentCategory.isActive ? '启用' : '禁用' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">
                {{ formatTime(currentEntertainmentCategory.createTime) }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>

      <template #footer>
        <el-button @click="showEntertainmentCategoryDialog = false" class="dialog-btn">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 课程分类详情对话框 -->
    <el-dialog
        v-model="showCourseCategoryDialog"
        :title="currentCourseCategory.categoryName"
        width="90%"
        class="category-dialog"
        :close-on-click-modal="false"
    >
      <div v-loading="courseCategoryLoading" class="dialog-content">
        <el-tabs v-model="courseCategoryActiveTab" class="custom-tabs">
          <el-tab-pane label="课程列表" name="courses">
            <div class="resource-header">
              <el-pagination
                  small
                  layout="prev, pager, next, sizes, total"
                  :total="courseCategoryTotalCourses"
                  :page-size="courseCategoryPageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  v-model:current-page="courseCategoryCurrentPage"
                  v-model:page-size="courseCategoryPageSize"
                  @current-change="handleCourseCategoryPageChange"
                  @size-change="handleCourseCategorySizeChange"
              />
            </div>
            <el-row :gutter="20" class="resource-grid">
              <el-col
                  :span="8"
                  v-for="course in courseCategoryCourses"
                  :key="course.courseId"
              >
                <el-card shadow="hover" class="resource-card" @click="showCourseDetail(course)">
                  <div class="resource-cover">
                    <el-image
                        :src="course.coverUrl"
                        fit="cover"
                        class="cover-image"
                    />
                    <div class="resource-type">
                      <el-tag size="small" effect="dark" type="info">
                        {{ course.totalLessons }}课时
                      </el-tag>
                    </div>
                  </div>
                  <div class="resource-info">
                    <h4 class="resource-title">{{ course.title }}</h4>
                    <div class="teacher-info">
                      <el-icon><User /></el-icon>
                      {{ course.teacherName }}{{ course.teacherTitle ? `(${course.teacherTitle})` : '' }}
                    </div>
                    <p class="resource-desc">{{ course.description }}</p>
                    <div class="resource-footer">
                      <el-tag size="small" :type="course.isFree ? 'success' : 'warning'" effect="light">
                        {{ course.isFree ? '免费' : '付费' }}
                      </el-tag>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="分类信息" name="info">
            <el-descriptions border class="category-info">
              <el-descriptions-item label="分类ID">{{ currentCourseCategory.categoryId }}</el-descriptions-item>
              <el-descriptions-item label="分类名称">{{ currentCourseCategory.categoryName }}</el-descriptions-item>
              <el-descriptions-item label="排序序号">{{ currentCourseCategory.sortOrder }}</el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag :type="currentCourseCategory.isActive ? 'success' : 'danger'" effect="light" round>
                  {{ currentCourseCategory.isActive ? '启用' : '禁用' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">
                {{ formatTime(currentCourseCategory.createTime) }}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
      </div>

      <template #footer>
        <el-button @click="showCourseCategoryDialog = false" class="dialog-btn">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 课程详情对话框 -->
    <el-dialog
        v-model="showCourseDialog"
        :title="currentCourse.title"
        width="90%"
        class="course-dialog"
        :close-on-click-modal="false"
    >
      <div v-loading="courseLoading" class="dialog-content">
        <el-row :gutter="20">
          <el-col :span="16" class="course-main">
            <el-tabs v-model="courseActiveTab" class="custom-tabs">
              <el-tab-pane label="课程详情" name="detail">
                <div class="course-cover-container">
                  <el-image
                      :src="currentCourse.coverUrl"
                      fit="cover"
                      class="course-cover"
                  />
                  <div class="cover-mask"></div>
                  <div class="cover-content">
                    <h3 class="course-title">{{ currentCourse.title }}</h3>
                    <div class="course-teacher">
                      <el-avatar :size="40" :src="currentCourse.teacherAvatar" class="teacher-avatar">
                        {{ currentCourse.teacherName?.charAt(0) || 'T' }}
                      </el-avatar>
                      <div class="teacher-info">
                        <div class="teacher-name">{{ currentCourse.teacherName }}</div>
                        <div class="teacher-title" v-if="currentCourse.teacherTitle">{{ currentCourse.teacherTitle }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="course-meta">
                  <el-tag :type="currentCourse.isFree ? 'success' : 'warning'" class="meta-tag">
                    {{ currentCourse.isFree ? '免费' : '付费' }}
                  </el-tag>
                  <el-tag class="meta-tag">
                    <el-icon><Clock /></el-icon>
                    {{ currentCourse.totalLessons }}课时
                  </el-tag>
                  <el-tag class="meta-tag">
                    <el-icon><User /></el-icon>
                    {{ currentCourse.learnedCount }}人学习
                  </el-tag>
                </div>
                <div class="course-description">
                  <h4 class="description-title">课程介绍</h4>
                  <div class="description-content">{{ currentCourse.description }}</div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="课程章节" name="lessons">
                <div class="lesson-list">
                  <div
                      v-for="(lesson, index) in courseLessons"
                      :key="lesson.lessonId"
                      class="lesson-item"
                      @click="playLesson(lesson)"
                      :class="{ 'first-lesson': index === 0 }"
                  >
                    <div class="lesson-index">{{ index + 1 }}</div>
                    <div class="lesson-icon">
                      <el-icon :size="20">
                        <VideoCamera v-if="lesson.lessonType === 1" />
                        <Headset v-else-if="lesson.lessonType === 2" />
                        <Document v-else />
                      </el-icon>
                    </div>
                    <div class="lesson-content">
                      <div class="lesson-title">
                        {{ lesson.lessonName }}
                        <el-tag v-if="lesson.isFree" size="small" type="success" class="free-tag">
                          免费
                        </el-tag>
                      </div>
                      <div class="lesson-meta">
                        <span class="duration">
                          <el-icon><Clock /></el-icon>
                          {{ lesson.duration }}分钟
                        </span>
                        <span class="create-time">
                          <el-icon><Calendar /></el-icon>
                          {{ formatTime(lesson.createTime) }}
                        </span>
                      </div>
                    </div>
                    <div class="lesson-action">
                      <el-button type="primary" size="small" round>开始学习</el-button>
                    </div>
                  </div>
                </div>
                <div class="pagination-wrapper">
                  <el-pagination
                      small
                      layout="prev, pager, next, sizes, total"
                      :total="courseTotalLessons"
                      :page-size="coursePageSize"
                      :page-sizes="[5, 10, 20, 30]"
                      v-model:current-page="courseCurrentPage"
                      v-model:page-size="coursePageSize"
                      @current-change="handleCoursePageChange"
                      @size-change="handleCourseSizeChange"
                  />
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col :span="8" class="course-sidebar">
            <el-card shadow="never" class="sidebar-card">
              <template #header>
                <div class="sidebar-header">
                  <el-icon><InfoFilled /></el-icon>
                  <span>课程信息</span>
                </div>
              </template>
              <el-descriptions :column="1" border class="course-info">
                <el-descriptions-item label="课程ID">
                  <span class="info-value">{{ currentCourse.courseId }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="分类">
                  <span class="info-value">{{ getCourseCategoryName(currentCourse.categoryId) }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="状态">
                  <el-tag :type="currentCourse.status === 1 ? 'success' : 'danger'" size="small" effect="light">
                    {{ currentCourse.status === 1 ? '上架' : '下架' }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">
                  <span class="info-value">{{ formatTime(currentCourse.createTime) }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="更新时间">
                  <span class="info-value">{{ formatTime(currentCourse.updateTime) }}</span>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>

            <el-card shadow="never" class="sidebar-card" v-if="currentCourse.teacherInfo">
              <template #header>
                <div class="sidebar-header">
                  <el-icon><UserFilled /></el-icon>
                  <span>讲师介绍</span>
                </div>
              </template>
              <div class="teacher-profile">
                <el-avatar :size="60" :src="currentCourse.teacherAvatar" class="profile-avatar">
                  {{ currentCourse.teacherName?.charAt(0) || 'T' }}
                </el-avatar>
                <div class="profile-info">
                  <div class="profile-name">{{ currentCourse.teacherName }}</div>
                  <div class="profile-title" v-if="currentCourse.teacherTitle">{{ currentCourse.teacherTitle }}</div>
                  <div class="profile-desc" v-if="currentCourse.teacherInfo">{{ currentCourse.teacherInfo }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <template #footer>
        <el-button @click="showCourseDialog = false" class="dialog-btn">关闭</el-button>
        <el-button type="primary" @click="startLearning" class="dialog-btn primary">
          <el-icon><VideoPlay /></el-icon>
          <span>开始学习</span>
        </el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Headset,
  VideoCamera,
  School,
  Document,
  VideoPlay,
  User,
  Clock,
  Calendar,
  InfoFilled,
  UserFilled
} from '@element-plus/icons-vue'
import axios from "axios"

// 娱乐活动部分
const entertainmentCategories = ref([])
const entertainmentResources = ref([])
const entertainmentResourcesLoading = ref(false)
const entertainmentActiveTab = ref('resources')
const showEntertainmentCategoryDialog = ref(false)
const currentEntertainmentCategory = ref({
  categoryId: 0,
  categoryName: '',
  iconUrl: '',
  sortOrder: 0,
  isActive: 0,
  createTime: ''
})

// 娱乐分页相关
const entertainmentCurrentPage = ref(1)
const entertainmentPageSize = ref(10)
const entertainmentTotalResources = ref(0)

// 课程部分
const courseCategories = ref([])
const popularCourses = ref([])
const courseCategoryCourses = ref([])
const courseLessons = ref([])
const currentCourse = ref({
  courseId: 0,
  categoryId: 0,
  title: '',
  coverUrl: '',
  teacherName: '',
  teacherTitle: '',
  teacherAvatar: '',
  teacherInfo: '',
  description: '',
  totalLessons: 0,
  learnedCount: 0,
  isFree: 0,
  status: 0,
  createTime: '',
  updateTime: ''
})
const currentCourseCategory = ref({
  categoryId: 0,
  categoryName: '',
  iconUrl: '',
  sortOrder: 0,
  isActive: 0,
  createTime: ''
})

// 课程对话框相关
const showCourseDialog = ref(false)
const showCourseCategoryDialog = ref(false)
const courseLoading = ref(false)
const courseCategoryLoading = ref(false)
const courseActiveTab = ref('detail')
const courseCategoryActiveTab = ref('courses')

// 课程分页相关
const courseCurrentPage = ref(1)
const coursePageSize = ref(10)
const courseTotalLessons = ref(0)
const courseCategoryCurrentPage = ref(1)
const courseCategoryPageSize = ref(10)
const courseCategoryTotalCourses = ref(0)

// 加载娱乐分类列表
const loadEntertainmentCategoryList = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/entertainment/category/list`, {
      params: {
        pageNum: 1,
        pageSize: 10
      }
    })

    if (response.data.code === 2000) {
      entertainmentCategories.value = response.data.data.list || []
    } else {
      ElMessage.error(response.data.message || '加载失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
    console.error(error)
  }
}

// 加载娱乐资源列表
const loadEntertainmentResources = async (categoryId) => {
  entertainmentResourcesLoading.value = true
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/entertainment/entertainment/list`, {
      params: {
        categoryId,
        pageNum: entertainmentCurrentPage.value,
        pageSize: entertainmentPageSize.value
      }
    })

    if (response.data.code === 2000) {
      entertainmentResources.value = response.data.data.list || []
      entertainmentTotalResources.value = response.data.data.total || 0
    } else {
      ElMessage.error(response.data.message || '加载资源失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
    console.error(error)
  } finally {
    entertainmentResourcesLoading.value = false
  }
}

// 加载课程分类列表
const loadCourseCategoryList = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/courses/category/list`, {
      params: {
        pageNum: 1,
        pageSize: 10
      }
    })

    if (response.data.code === 2000) {
      courseCategories.value = response.data.data.list || []
    } else {
      ElMessage.error(response.data.message || '加载课程分类失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
    console.error(error)
  }
}

// 加载热门课程
const loadPopularCourses = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/courses/list`, {
      params: {
        pageNum: 1,
        pageSize: 6,
        sortField: 'learned_count',
        sortOrder: 'desc'
      }
    })

    if (response.data.code === 2000) {
      popularCourses.value = response.data.data.list || []
    } else {
      ElMessage.error(response.data.message || '加载热门课程失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
    console.error(error)
  }
}

// 加载课程分类下的课程
const loadCoursesByCategory = async (categoryId) => {
  courseCategoryLoading.value = true
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/courses/list`, {
      params: {
        categoryId,
        pageNum: courseCategoryCurrentPage.value,
        pageSize: courseCategoryPageSize.value
      }
    })

    if (response.data.code === 2000) {
      courseCategoryCourses.value = response.data.data.list || []
      courseCategoryTotalCourses.value = response.data.data.total || 0
    } else {
      ElMessage.error(response.data.message || '加载课程失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
    console.error(error)
  } finally {
    courseCategoryLoading.value = false
  }
}

// 加载课程详情
const loadCourseDetail = async (courseId) => {
  courseLoading.value = true
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/courses/detail`, {
      params: {courseId}
    })

    if (response.data.code === 2000) {
      currentCourse.value = response.data.data
    } else {
      ElMessage.error(response.data.message || '加载课程详情失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
    console.error(error)
  } finally {
    courseLoading.value = false
  }
}

// 加载课程章节
const loadCourseLessons = async (courseId) => {
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/courses/lesson/list`, {
      params: {
        courseId,
        pageNum: courseCurrentPage.value,
        pageSize: coursePageSize.value
      }
    })

    if (response.data.code === 2000) {
      courseLessons.value = response.data.data.list || []
      courseTotalLessons.value = response.data.data.total || 0
    } else {
      ElMessage.error(response.data.message || '加载课程章节失败')
    }
  } catch (error) {
    ElMessage.error('网络请求失败')
    console.error(error)
  }
}

// 娱乐分类详情
const showEntertainmentCategoryDetail = (category) => {
  currentEntertainmentCategory.value = category
  entertainmentCurrentPage.value = 1
  entertainmentPageSize.value = 10
  showEntertainmentCategoryDialog.value = true
  loadEntertainmentResources(category.categoryId)
}

// 课程分类详情
const showCourseCategoryDetail = (category) => {
  currentCourseCategory.value = category
  courseCategoryCurrentPage.value = 1
  courseCategoryPageSize.value = 10
  showCourseCategoryDialog.value = true
  loadCoursesByCategory(category.categoryId)
}

// 课程详情
const showCourseDetail = (course) => {
  currentCourse.value = course
  courseCurrentPage.value = 1
  coursePageSize.value = 10
  showCourseDialog.value = true
  loadCourseDetail(course.courseId)
  loadCourseLessons(course.courseId)
}

// 播放课程章节
const playLesson = (lesson) => {
  ElMessage.info(`开始播放: ${lesson.lessonName}`)
  // 实际项目中这里会调用播放器组件播放课程内容
}

// 开始学习
const startLearning = () => {
  if (courseLessons.value.length > 0) {
    playLesson(courseLessons.value[0])
  } else {
    ElMessage.warning('该课程暂无章节内容')
  }
}

// 获取课程分类名称
const getCourseCategoryName = (categoryId) => {
  const category = courseCategories.value.find(c => c.categoryId === categoryId)
  return category ? category.categoryName : '未知分类'
}

// 获取资源类型名称
const getResourceType = (type) => {
  const types = {
    1: '视频',
    2: '音频',
    3: '电子书'
  }
  return types[type] || '未知类型'
}

// 获取资源类型标签样式
const getResourceTypeTag = (type) => {
  const typeMap = {
    1: 'danger',  // 视频
    2: 'primary', // 音频
    3: 'success'  // 电子书
  }
  return typeMap[type] || 'info'
}

// 分页变化处理
const handleEntertainmentPageChange = (newPage) => {
  entertainmentCurrentPage.value = newPage
  loadEntertainmentResources(currentEntertainmentCategory.value.categoryId)
}

const handleCourseCategoryPageChange = (newPage) => {
  courseCategoryCurrentPage.value = newPage
  loadCoursesByCategory(currentCourseCategory.value.categoryId)
}

const handleCoursePageChange = (newPage) => {
  courseCurrentPage.value = newPage
  loadCourseLessons(currentCourse.value.courseId)
}

// 分页大小变化处理
const handleEntertainmentSizeChange = (newSize) => {
  entertainmentPageSize.value = newSize
  entertainmentCurrentPage.value = 1
  loadEntertainmentResources(currentEntertainmentCategory.value.categoryId)
}

const handleCourseCategorySizeChange = (newSize) => {
  courseCategoryPageSize.value = newSize
  courseCategoryCurrentPage.value = 1
  loadCoursesByCategory(currentCourseCategory.value.categoryId)
}

const handleCourseSizeChange = (newSize) => {
  coursePageSize.value = newSize
  courseCurrentPage.value = 1
  loadCourseLessons(currentCourse.value.courseId)
}

const formatTime = (timeStr) => {
  if (!timeStr) return ''
  return new Date(timeStr).toLocaleString()
}

onMounted(() => {
  loadEntertainmentCategoryList()
  loadCourseCategoryList()
  loadPopularCourses()
})
</script>

<style scoped lang="scss">
.main-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: none;

  :deep(.el-card__header) {
    background: linear-gradient(135deg, #f6f9fc 0%, #eef2f5 100%);
    border-bottom: 1px solid #e6e6e6;
    padding: 20px;
  }
}

.card-header {
  display: flex;
  flex-direction: column;

  .header-title {
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
  }

  .header-subtitle {
    font-size: 14px;
    color: #7f8c8d;
  }
}

.section-container {
  margin-bottom: 30px;

  &:last-child {
    margin-bottom: 0;
  }
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;

  .section-icon {
    margin-right: 10px;
    color: var(--el-color-primary);
    font-size: 20px;
  }

  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
  }

  .hot-tag {
    margin-left: 10px;
    transform: translateY(-2px);
  }
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.activity-card {
  // 基础样式
  border-radius: 12px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  border: none;
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;

  // 悬浮效果
  &:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(64, 158, 255, 0.15);

    // 悬浮时显示底部提示
    .activity-hover {
      opacity: 1;
      transform: translateY(0);
    }

    // 图标放大效果
    .activity-icon {
      transform: scale(1.1);

      .default-icon {
        color: var(--el-color-primary-light-3);
      }
    }
  }

  // 卡片内容布局
  .activity-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 20px;
    height: 100%;
  }

  // 图标容器
  .activity-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform 0.3s ease;
    position: relative;

    // 图标背景装饰
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(64, 158, 255, 0.1);
      transform: scale(0.9);
      z-index: -1;
    }

    // 分类图标
    .category-icon {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid white;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    // 默认图标
    .default-icon {
      color: var(--el-color-primary);
      font-size: 36px;
      transition: color 0.3s ease;
    }
  }

  // 标题样式
  .activity-title {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 8px;
    position: relative;
    padding-bottom: 8px;

    // 标题下划线装饰
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 2px;
      background: linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-light-3));
      border-radius: 1px;
    }
  }

  // 悬浮提示
  .activity-hover {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-light-2));
    color: white;
    text-align: center;
    padding: 12px;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: 0 0 12px 12px;

    // 添加小箭头
    &::before {
      content: '';
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid var(--el-color-primary-light-2);
    }
  }

  // 课程卡片特殊样式
  &.course-card {
    .activity-content {
      padding: 0;
      overflow: hidden;
    }

    .course-cover {
      position: relative;
      width: 100%;
      height: 120px;
      overflow: hidden;
      border-radius: 12px 12px 0 0;

      .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .cover-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;

        .play-icon {
          color: white;
          font-size: 36px;
          text-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
      }

      &:hover {
        .cover-image {
          transform: scale(1.05);
        }

        .cover-overlay {
          opacity: 1;
        }
      }
    }

    .course-info {
      padding: 16px;

      .activity-title {
        font-size: 15px;
        margin-bottom: 12px;
        padding-bottom: 0;

        &::after {
          display: none;
        }
      }

      .activity-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .learners {
          font-size: 12px;
          color: #666;
          display: flex;
          align-items: center;

          .el-icon {
            margin-right: 4px;
            font-size: 14px;
            color: var(--el-color-primary);
          }
        }

        .price-tag {
          font-weight: 500;
          letter-spacing: 0.5px;
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .activity-card {
    .activity-icon {
      width: 60px;
      height: 60px;

      .default-icon {
        font-size: 28px;
      }
    }

    .activity-title {
      font-size: 15px;
    }

    &.course-card {
      .course-cover {
        height: 100px;
      }
    }
  }


  .activity-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: center;
    margin-bottom: 5px;
  }

  .activity-hover {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(64, 158, 255, 0.9);
    color: white;
    text-align: center;
    padding: 5px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-radius: 0 0 10px 10px;
  }
}

.course-card {
  .activity-content {
    align-items: flex-start;
  }

  .course-cover {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;

    .cover-image {
      width: 100%;
      height: 100%;
      transition: transform 0.3s;
    }

    .cover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s;

      .play-icon {
        color: white;
        font-size: 30px;
      }
    }

    &:hover {
      .cover-overlay {
        opacity: 1;
      }

      .cover-image {
        transform: scale(1.05);
      }
    }
  }

  .course-info {
    width: 100%;

    .activity-title {
      text-align: left;
      font-size: 14px;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 40px;
    }

    .activity-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;

      .learners {
        font-size: 12px;
        color: #666;
        display: flex;
        align-items: center;

        .el-icon {
          margin-right: 3px;
          font-size: 14px;
        }
      }

      .price-tag {
        margin-left: 5px;
      }
    }
  }
}

.dialog-content {
  padding: 10px;
}

.custom-tabs {
  :deep(.el-tabs__header) {
    margin: 0 0 20px;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
    background-color: #f0f0f0;
  }

  :deep(.el-tabs__item) {
    font-weight: 500;
    padding: 0 20px;
  }
}

.resource-grid {
  margin-top: 10px;
}

.resource-card {
  border-radius: 8px;
  margin-bottom: 20px;
  border: none;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .resource-cover {
    position: relative;
    height: 150px;
    overflow: hidden;
    border-radius: 6px;

    .cover-image {
      width: 100%;
      height: 100%;
      transition: transform 0.3s;
    }

    .resource-type {
      position: absolute;
      top: 10px;
      right: 10px;
    }

    &:hover {
      .cover-image {
        transform: scale(1.05);
      }
    }
  }

  .resource-info {
    padding: 15px 10px 10px;

    .resource-title {
      font-size: 15px;
      margin: 0 0 8px;
      color: #333;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 42px;
    }

    .teacher-info {
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 5px;
      }
    }

    .resource-desc {
      font-size: 12px;
      color: #999;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 36px;
    }

    .resource-footer {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}

.category-info {
  :deep(.el-descriptions__body) {
    background-color: #f9fafc;
  }

  :deep(.el-descriptions__label) {
    width: 100px;
    color: #666;
  }
}

.course-dialog {
  :deep(.el-dialog__header) {
    border-bottom: 1px solid #f0f0f0;
    margin-right: 0;
  }

  :deep(.el-dialog__body) {
    padding: 20px;
  }
}

.course-main {
  .course-cover-container {
    position: relative;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;

    .course-cover {
      width: 100%;
      height: 100%;
    }

    .cover-mask {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60%;
      background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    }

    .cover-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      color: white;

      .course-title {
        font-size: 22px;
        margin: 0 0 15px;
      }

      .course-teacher {
        display: flex;
        align-items: center;

        .teacher-avatar {
          margin-right: 10px;
        }

        .teacher-info {
          .teacher-name {
            font-size: 16px;
            font-weight: 500;
          }

          .teacher-title {
            font-size: 12px;
            color: #ccc;
          }
        }
      }
    }
  }

  .course-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;

    .meta-tag {
      .el-icon {
        margin-right: 3px;
      }
    }
  }

  .course-description {
    .description-title {
      font-size: 16px;
      color: #333;
      margin: 0 0 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #f0f0f0;
    }

    .description-content {
      line-height: 1.8;
      color: #555;
    }
  }

  .lesson-list {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f0f0f0;

    .lesson-item {
      display: flex;
      align-items: center;
      padding: 15px;
      background-color: white;
      border-bottom: 1px solid #f0f0f0;
      transition: all 0.3s;
      cursor: pointer;

      &:hover {
        background-color: #f9fafc;

        .lesson-title {
          color: var(--el-color-primary);
        }
      }

      &.first-lesson {
        background-color: #f0f7ff;

        &:hover {
          background-color: #e0efff;
        }
      }

      .lesson-index {
        width: 24px;
        height: 24px;
        background-color: #f0f0f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #666;
        margin-right: 15px;
        flex-shrink: 0;
      }

      .lesson-icon {
        margin-right: 15px;
        color: var(--el-color-primary);
      }

      .lesson-content {
        flex: 1;

        .lesson-title {
          font-weight: 500;
          margin-bottom: 5px;
          transition: color 0.3s;
          display: flex;
          align-items: center;

          .free-tag {
            margin-left: 8px;
          }
        }

        .lesson-meta {
          font-size: 12px;
          color: #999;
          display: flex;

          .duration {
            display: flex;
            align-items: center;

            .el-icon {
              margin-right: 3px;
            }
          }

          .create-time {
            display: flex;
            align-items: center;
            margin-left: 15px;

            .el-icon {
              margin-right: 3px;
            }
          }
        }
      }

      .lesson-action {
        opacity: 0;
        transition: opacity 0.3s;
      }

      &:hover {
        .lesson-action {
          opacity: 1;
        }
      }
    }
  }
}

.course-sidebar {
  .sidebar-card {
    border-radius: 8px;
    margin-bottom: 20px;
    border: none;

    :deep(.el-card__header) {
      border-bottom: 1px solid #f0f0f0;
      padding: 12px 20px;
    }

    .sidebar-header {
      display: flex;
      align-items: center;
      font-weight: 500;

      .el-icon {
        margin-right: 8px;
        color: var(--el-color-primary);
      }
    }
  }

  .course-info {
    :deep(.el-descriptions__label) {
      width: 80px;
      color: #666;
    }

    .info-value {
      color: #333;
    }
  }

  .teacher-profile {
    display: flex;

    .profile-avatar {
      margin-right: 15px;
      flex-shrink: 0;
    }

    .profile-info {
      .profile-name {
        font-weight: 500;
        margin-bottom: 5px;
      }

      .profile-title {
        font-size: 12px;
        color: #666;
        margin-bottom: 8px;
      }

      .profile-desc {
        font-size: 13px;
        color: #666;
        line-height: 1.6;
      }
    }
  }
}

.dialog-btn {
  padding: 10px 20px;
  border-radius: 6px;

  &.primary {
    background: linear-gradient(to right, #409EFF, #64b5ff);
    border: none;

    .el-icon {
      margin-right: 5px;
    }
  }
}

.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

@media (max-width: 992px) {
  .activity-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
  }

  .resource-card {
    .resource-info {
      .resource-title {
        height: 38px;
      }
    }
  }
}

@media (max-width: 768px) {
  .activity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .course-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
    }

    .el-row {
      flex-direction: column;
    }

    .el-col {
      width: 100%;

      &.course-main {
        margin-bottom: 20px;
      }
    }
  }

  .resource-grid {
    .el-col {
      width: 100%;
    }
  }
}

@media (max-width: 576px) {
  .activity-grid {
    grid-template-columns: 1fr;
  }

  .card-header {
    .header-title {
      font-size: 18px;
    }
  }

  .section-header {
    .section-title {
      font-size: 16px;
    }
  }
}
</style>